<div class="relative w-full h-full">
  <div class="absolute inset-0">
    <img src={{get this.args.images this.currentIndex}} class="w-full h-full object-cover" alt="景点图片">
  </div>

  <div class="absolute bottom-4 left-0 right-0 flex justify-center gap-2">
    {{#each this.args.images as |image index|}}
      <button
        class="w-2 h-2 rounded-full {{if (eq index this.currentIndex) 'bg-white' 'bg-white/50'}}"
        {{on "click" (fn (mut this.currentIndex) index)}}
      ></button>
    {{/each}}
  </div>

  <button
    class="absolute left-2 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white p-2 rounded-full"
    {{on "click" this.prev}}
  >
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
    </svg>
  </button>

  <button
    class="absolute right-2 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white p-2 rounded-full"
    {{on "click" this.next}}
  >
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
  </button>
</div>